<template>
    <view class="order-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <text class="nav-title">提交定制需求</text>
        </view>
        
        <!-- 表单内容 -->
        <view class="form-container">
            <view class="form-section">
                <view class="section-title">基本信息</view>
                
                <!-- 标题 -->
                <view class="form-item">
                    <text class="label">需求标题</text>
                    <input 
                        type="text" 
                        v-model="orderForm.title" 
                        placeholder="请输入需求标题" 
                        class="input"
                        maxlength="50"
                    />
                    <text class="word-count">{{ orderForm.title.length }}/50</text>
                </view>
                
                <!-- 编程语言 -->
                <view class="form-item">
                    <text class="label">编程语言 (可多选)</text>
                    <view class="language-selector">
                        <view 
                            v-for="(lang, index) in languageOptions" 
                            :key="index" 
                            class="language-tag" 
                            :class="{ 'selected': selectedLanguages.includes(lang) }"
                            @click="toggleLanguage(lang)"
                        >
                            {{ lang }}
                        </view>
                    </view>
                    <view class="selected-languages" v-if="orderForm.language">
                        <text class="selected-text">已选: {{ orderForm.language }}</text>
                    </view>
                </view>
                
                <!-- 预算范围 -->
                <view class="form-item budget-item">
                    <text class="label">预算范围 (元)</text>
                    <view class="budget-inputs">
                        <input 
                            type="digit" 
                            v-model="orderForm.lessBudget" 
                            placeholder="最低预算" 
                            class="input budget-input"
                        />
                        <text class="budget-separator">至</text>
                        <input 
                            type="digit" 
                            v-model="orderForm.highBudget" 
                            placeholder="最高预算" 
                            class="input budget-input"
                        />
                    </view>
                </view>
                
                <!-- 期望完成天数 -->
                <view class="form-item">
                    <text class="label">期望完成天数</text>
                    <input 
                        type="number" 
                        v-model="orderForm.expectation" 
                        placeholder="请输入期望完成天数" 
                        class="input"
                    />
                </view>
                
                <!-- 需求内容 -->
                <view class="form-item textarea-item">
                    <text class="label">需求详情</text>
                    <textarea 
                        v-model="orderForm.content" 
                        placeholder="请详细描述您的需求，包括功能、要求、参考案例等" 
                        class="textarea"
                        maxlength="1000"
                    />
                    <text class="word-count">{{ orderForm.content.length }}/1000</text>
                </view>
                
                <!-- 图片上传 -->
                <view class="form-item">
                    <text class="label">上传需求相关图片 (选填)</text>
                    <view class="image-uploader">
                        <view class="image-list">
                            <view class="image-item" v-for="(image, index) in orderForm.imageList" :key="index">
                                <image :src="image" mode="aspectFill" class="preview-image" @error="handleImageError(index)"></image>
                                <view class="delete-btn" @click="removeImage(index)">×</view>
                            </view>
                            
                            <view class="upload-btn" @click="chooseImage" v-if="orderForm.imageList.length < 9">
                                <text class="upload-icon">+</text>
                                <text class="upload-text">上传图片</text>
                            </view>
                        </view>
                        <text class="tips">最多可上传9张图片，支持jpg、png格式</text>
                        <text class="tips">已上传 {{ orderForm.imageList.length }} 张图片</text>
                    </view>
                </view>

                <!-- 文件上传 -->
                <view class="form-item">
                    <text class="label">上传需求相关文件 (选填)</text>
                    <view class="file-uploader">
                        <view class="file-info" v-if="orderForm.file">
                            <view class="file-name">{{ fileName }}</view>
                            <view class="delete-btn" @click="removeFile">×</view>
                        </view>
                        <view class="upload-file-btn" @click="chooseFile" v-if="!orderForm.file">
                            <text class="upload-icon">📁</text>
                            <text class="upload-text">上传文件</text>
                        </view>
                        <text class="tips">文件大小限制在25MB以内</text>
                    </view>
                </view>
            </view>
            
            <!-- 用户须知 -->
            <view class="notice-section">
                <view class="notice-title">
                    <text class="notice-icon">!</text>
                    <text>用户须知</text>
                </view>
                <view class="notice-content">
                    <text>1. 提交需求后，我们将在24小时内联系您</text>
                    <text>2. 预算范围仅作为参考，最终价格将根据需求复杂度确定</text>
                    <text>3. 请确保您的联系方式正确，以便我们能及时与您沟通</text>
                </view>
            </view>
            
            <!-- 项目结构图绘制按钮 -->
            <view class="button-container draw-btn-container">
                <button class="draw-btn" @click="navigateToDrawPage">
                    <text class="draw-icon">✏️</text>
                    绘制项目结构图
                </button>
            </view>
            
            <!-- 提交按钮 -->
            <view class="button-container">
                <button class="submit-btn" @click="submitOrder" :disabled="isSubmitting">
                    {{ isSubmitting ? '提交中...' : '提交需求' }}
                </button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import request from '@/utils/request'
import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref({})

// 表单数据
const orderForm = ref({
    title: '',
    content: '',
    language: '',
    lessBudget: '',
    highBudget: '',
    expectation: '',
    imageList: [],
    file: ''
})

// 编程语言选项
const languageOptions = [
    'Java', 'Python', 'JavaScript', 'C++', 
    'C#', 'PHP', 'Go', 'Swift', 'Kotlin', 'Rust','Html',
    'Vue','Uniapp', 'React','Flutter','微信小程序',
    'Android原生开发','IOS原生开发','无要求','其他'
]

// 已选择的语言
const selectedLanguages = ref([])

// 文件名
const fileName = ref('')

// 提交状态
const isSubmitting = ref(false)

// 页面生命周期 - 加载时执行
onLoad(() => {
    console.log('页面加载 onLoad')
    getUserInfo()
})

// 页面生命周期 - 每次显示时执行
onShow(() => {
    console.log('页面显示 onShow')
    setTimeout(() => {
        console.log('延迟检查绘图返回')
        checkDrawImages()
    }, 500)
})

// 页面生命周期 - 隐藏时执行
onHide(() => {
    console.log('页面隐藏 onHide')
})

// 页面生命周期 - 卸载时执行
onUnload(() => {
    console.log('页面卸载 onUnload')
})

// 切换选择语言
const toggleLanguage = (lang) => {
    const index = selectedLanguages.value.indexOf(lang)
    if (index === -1) {
        // 添加语言
        selectedLanguages.value.push(lang)
    } else {
        // 移除语言
        selectedLanguages.value.splice(index, 1)
    }
    
    // 更新表单中的语言字段，以分号分隔
    orderForm.value.language = selectedLanguages.value.join(';')
}

// 选择图片
const chooseImage = () => {
    uni.chooseImage({
        count: 9 - orderForm.value.imageList.length,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            // 上传选中的图片
            const tempFilePaths = res.tempFilePaths
            tempFilePaths.forEach(path => {
                uploadImage(path)
            })
        }
    })
}

// 上传图片
const uploadImage = (filePath) => {
    uni.showLoading({
        title: '上传中...'
    })
    
    // 获取服务器基础URL
    const baseUrl = uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'
    const uploadUrl = `${baseUrl}/system/uploadImg`
    
    uni.uploadFile({
        url: uploadUrl,
        filePath: filePath,
        name: 'file',
        header: {
            'sa-token': uni.getStorageSync('sa-token')
        },
        success: (uploadRes) => {
            try {
                const result = JSON.parse(uploadRes.data)
                if (result.code === 200) {
                    // 添加上传成功的图片URL到列表
                    orderForm.value.imageList.push(result.data)
                    uni.showToast({
                        title: '上传成功',
                        icon: 'success'
                    })
                } else {
                    uni.showToast({
                        title: result.msg || '上传失败',
                        icon: 'none'
                    })
                }
            } catch (e) {
                uni.showToast({
                    title: '上传失败，请重试',
                    icon: 'none'
                })
            }
        },
        fail: (error) => {
            console.error('上传失败:', error)
            uni.showToast({
                title: '上传失败，请重试',
                icon: 'none'
            })
        },
        complete: () => {
            uni.hideLoading()
        }
    })
}

// 检查是否有从绘图页面返回的图片
const checkDrawImages = () => {
    console.log('执行检查绘图返回图片方法')
    try {
        // 检查全局变量中是否有绘图图片
        const app = getApp();
        if (app && app.globalData && app.globalData.drawImage) {
            console.log('从全局变量获取到绘图图片', app.globalData.drawImage);
            
            // 获取图片URL
            const imageUrl = app.globalData.drawImage;
            
            // 验证图片URL
            if (imageUrl) {
                console.log('准备验证图片URL', imageUrl);
                // 预加载图片，确认URL有效
                uni.getImageInfo({
                    src: imageUrl,
                    success: () => {
                        // 图片有效，添加到列表
                        orderForm.value.imageList.push(imageUrl);
                        console.log('成功添加图片到列表', orderForm.value.imageList);
                        
                        // 强制更新视图
                        orderForm.value = { ...orderForm.value };
                        
                        uni.showToast({ title: '成功添加结构图', icon: 'success' });
                    },
                    fail: (err) => {
                        console.error('图片URL无效:', err);
                        uni.showToast({ 
                            title: '图片加载失败，请重试', 
                            icon: 'none' 
                        });
                    },
                    complete: () => {
                        // 清空全局变量
                        app.globalData.drawImage = null;
                        console.log('清空全局变量');
                    }
                });
            } else {
                console.error('图片URL为空');
                // 清空全局变量
                app.globalData.drawImage = null;
            }
        } else {
            console.log('全局变量中没有找到绘图图片');
        }
    } catch (e) {
        console.error('读取全局图片变量失败', e);
    }
}

// 处理图片加载错误
const handleImageError = (index) => {
    console.error(`图片加载失败，索引: ${index}，URL: ${orderForm.value.imageList[index]}`);
    uni.showToast({
        title: '图片加载失败',
        icon: 'none'
    });
}

// 移除图片
const removeImage = async (index) => {
    const imageUrl = orderForm.value.imageList[index]
    
    // 调用删除图片接口
    uni.showLoading({
        title: '删除中...'
    })
    
    try {
        const res = await request('/system/deleteImg', {
            method: 'POST',
            data: imageUrl
        })
        
        if (res.code === 200) {
            // 从列表中删除
            orderForm.value.imageList.splice(index, 1)
            uni.showToast({
                title: '删除成功',
                icon: 'success'
            })
        } else {
            uni.showToast({
                title: res.msg || '删除失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('删除图片失败', error)
        uni.showToast({
            title: '删除失败，请重试',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}

// 选择文件
const chooseFile = () => {
    // 检查是否已经有文件
    if (orderForm.value.file) {
        uni.showToast({
            title: '只能上传一个文件，请先删除已有文件',
            icon: 'none'
        })
        return
    }
    
    uni.chooseMessageFile({
        count: 1,
        type: 'all',
        success: (res) => {
            const tempFilePath = res.tempFiles[0].path
            const tempFile = res.tempFiles[0]
            
            // 检查文件大小限制 (25MB = 25 * 1024 * 1024 bytes)
            const maxSize = 25 * 1024 * 1024
            if (tempFile.size > maxSize) {
                uni.showToast({
                    title: '文件大小超过25MB限制',
                    icon: 'none'
                })
                return
            }
            
            // 保存文件名
            fileName.value = tempFile.name || '未命名文件'
            
            // 上传文件
            uploadFile(tempFilePath)
        }
    })
}

// 上传文件
const uploadFile = (filePath) => {
    uni.showLoading({
        title: '上传中...'
    })
    
    // 获取服务器基础URL
    const baseUrl = uni.getStorageSync('baseUrl') || 'http://127.0.0.1:8080'
    const uploadUrl = `${baseUrl}/system/uploadFile`
    
    uni.uploadFile({
        url: uploadUrl,
        filePath: filePath,
        name: 'file',
        header: {
            'sa-token': uni.getStorageSync('sa-token')
        },
        success: (uploadRes) => {
            try {
                const result = JSON.parse(uploadRes.data)
                if (result.code === 200) {
                    // 添加上传成功的文件URL到表单
                    orderForm.value.file = result.data
                    uni.showToast({
                        title: '文件上传成功',
                        icon: 'success'
                    })
                } else {
                    uni.showToast({
                        title: result.msg || '文件上传失败',
                        icon: 'none'
                    })
                }
            } catch (e) {
                uni.showToast({
                    title: '文件上传失败，请重试',
                    icon: 'none'
                })
            }
        },
        fail: (error) => {
            console.error('文件上传失败:', error)
            uni.showToast({
                title: '文件上传失败，请重试',
                icon: 'none'
            })
        },
        complete: () => {
            uni.hideLoading()
        }
    })
}

// 移除文件
const removeFile = async () => {
    const fileUrl = orderForm.value.file
    
    // 调用删除文件接口
    uni.showLoading({
        title: '删除中...'
    })
    
    try {
        const res = await request('/system/deleteFile', {
            method: 'POST',
            data: fileUrl
        })
        
        if (res.code === 200) {
            // 清空文件字段
            orderForm.value.file = ''
            fileName.value = ''
            uni.showToast({
                title: '删除成功',
                icon: 'success'
            })
        } else {
            uni.showToast({
                title: res.msg || '删除失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('删除文件失败', error)
        uni.showToast({
            title: '删除失败，请重试',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}

// 跳转到绘制页面
const navigateToDrawPage = () => {
    // 确保清除之前可能存在的全局图片变量
    try {
        const app = getApp();
        if (app && app.globalData) {
            app.globalData.drawImage = null;
            console.log('清除之前的全局图片变量');
        }
    } catch (e) {
        console.error('清除全局图片变量失败', e);
    }
    
    uni.navigateTo({
        url: '/pages/orders/draw',
        success: () => {
            console.log('跳转到绘制页面成功');
        },
        fail: (error) => {
            console.error('跳转到绘制页面失败', error);
            uni.showToast({
                title: '跳转失败，请重试',
                icon: 'none'
            });
        }
    });
}

// 提交订单
const submitOrder = async () => {
    // 表单验证
    if (!orderForm.value.title.trim()) {
        uni.showToast({ title: '请输入需求标题', icon: 'none' })
        return
    }
    
    if (!orderForm.value.language || selectedLanguages.value.length === 0) {
        uni.showToast({ title: '请至少选择一种编程语言', icon: 'none' })
        return
    }
    
    if (!orderForm.value.lessBudget || !orderForm.value.highBudget) {
        uni.showToast({ title: '请输入预算范围', icon: 'none' })
        return
    }
    
    if (Number(orderForm.value.lessBudget) > Number(orderForm.value.highBudget)) {
        uni.showToast({ title: '最低预算不能大于最高预算', icon: 'none' })
        return
    }
    
    if (!orderForm.value.expectation) {
        uni.showToast({ title: '请输入期望完成天数', icon: 'none' })
        return
    }
    
    if (Number(orderForm.value.expectation) <= 0) {
        uni.showToast({ title: '期望完成天数必须大于0', icon: 'none' })
        return
    }
    
    if (!orderForm.value.content.trim()) {
        uni.showToast({ title: '请输入需求详情', icon: 'none' })
        return
    }
    
    // 开始提交
    isSubmitting.value = true
    
    try {
        const res = await request('/order/add', {
            method: 'POST',
            data: {
                title: orderForm.value.title,
                content: orderForm.value.content,
                language: orderForm.value.language,
                lessBudget: Number(orderForm.value.lessBudget),
                highBudget: Number(orderForm.value.highBudget),
                expectation: Number(orderForm.value.expectation),
                imageList: orderForm.value.imageList,
                file: orderForm.value.file
            }
        })
        
        if (res.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' })
            
            // 重置表单
            orderForm.value = {
                title: '',
                content: '',
                language: '',
                lessBudget: '',
                highBudget: '',
                expectation: '',
                imageList: [],
                file: ''
            }
            selectedLanguages.value = []
            fileName.value = ''
            
            // 跳转到我的订单页面
            setTimeout(() => {
                uni.navigateTo({ url: '/pages/orders/my-orders' })
            }, 1500)
        } else {
            uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
        }
    } catch (error) {
        console.error('提交订单失败', error)
        uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
    } finally {
        isSubmitting.value = false
    }
}

// 获取用户信息
const getUserInfo = async () => {
    const res = await request('/user/getUserInfo', { method: 'GET' })
    if (res.code === 200) {
        userInfo.value = res.data
        const phone = userInfo.value.phone
        const wechatId = userInfo.value.wechatId
        if ((!phone || phone === null) && (!wechatId || wechatId === null)) {
            uni.showToast({ title: '请先绑定手机号或微信', icon: 'none' })
            setTimeout(() => {
                uni.redirectTo({ url: '/pages/user/edit-profile' })
            }, 1000)
        }
    } else {
        uni.showToast({ title: res.msg || '获取用户信息失败', icon: 'none' })
    }
}
</script>

<style lang="scss" scoped>
.order-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
    padding-bottom: 40rpx;
}

/* 导航栏样式 */
.nav-bar {
    background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #2D1457;
}

.nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #A259FF;
}

/* 表单容器 */
.form-container {
    padding: 20rpx 30rpx;
}

.form-section {
    background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
    margin-top: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx #7B2FF244;
    border: 1px solid #2D1457;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #A259FF;
    margin-bottom: 30rpx;
}

/* 表单项样式 */
.form-item {
    margin-bottom: 30rpx;
    position: relative;
}

.label {
    display: block;
    font-size: 28rpx;
    color: #B8B8D1;
    margin-bottom: 16rpx;
}

.input {
    width: 100%;
    height: 80rpx;
    background: rgba(45, 20, 87, 0.3);
    border: 1px solid #2D1457;
    border-radius: 12rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #fff;
}

.word-count {
    position: absolute;
    bottom: 10rpx;
    right: 20rpx;
    font-size: 24rpx;
    color: #B8B8D1;
}

/* 预算范围 */
.budget-inputs {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.budget-input {
    flex: 1;
}

.budget-separator {
    color: #B8B8D1;
    font-size: 28rpx;
}

/* 语言选择器样式 */
.language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-bottom: 20rpx;
}

.language-tag {
    padding: 10rpx 20rpx;
    background: rgba(45, 20, 87, 0.3);
    border: 1px solid #2D1457;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #B8B8D1;
    transition: all 0.3s;
}

.language-tag.selected {
    background: rgba(123, 47, 242, 0.3);
    border-color: #7B2FF2;
    color: #fff;
}

.selected-languages {
    margin-top: 10rpx;
}

.selected-text {
    font-size: 24rpx;
    color: #6069f0; 
}

/* 图片上传区域 */
.image-uploader {
    margin-top: 20rpx;
}

.image-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
}

.image-item {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 12rpx;
    overflow: hidden;
    border: 1px solid #2D1457;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 44rpx;
    height: 44rpx;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
}

.upload-btn {
    aspect-ratio: 1/1;
    background: rgba(45, 20, 87, 0.3);
    border: 1px dashed #7B2FF2;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.upload-icon {
    font-size: 48rpx;
    color: #7B2FF2;
    margin-bottom: 10rpx;
}

.upload-text {
    font-size: 24rpx;
    color: #B8B8D1;
}

.tips {
    font-size: 24rpx;
    color: #B8B8D1;
    margin-top: 20rpx;
}

/* 文本域样式 */
.textarea-item {
    position: relative;
}

.textarea {
    width: 100%;
    height: 300rpx;
    background: rgba(45, 20, 87, 0.3);
    border: 1px solid #2D1457;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #fff;
}

/* 文件上传区域 */
.file-uploader {
    margin-top: 20rpx;
}

.file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(45, 20, 87, 0.3);
    border: 1px solid #2D1457;
    border-radius: 12rpx;
    padding: 15rpx 20rpx;
    margin-bottom: 10rpx;
}

.file-name {
    font-size: 26rpx;
    color: #B8B8D1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file-btn {
    height: 200rpx;
    background: rgba(45, 20, 87, 0.3);
    border: 1px dashed #7B2FF2;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10rpx;
}

.upload-file-btn .upload-icon {
    font-size: 48rpx;
    color: #7B2FF2;
    margin-bottom: 10rpx;
}

.upload-file-btn .upload-text {
    font-size: 24rpx;
    color: #B8B8D1;
}

/* 用户须知 */
.notice-section {
    background: rgba(123, 47, 242, 0.1);
    border: 1px solid #7B2FF2;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-top: 30rpx;
}

.notice-title {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 28rpx;
    color: #A259FF;
    font-weight: bold;
    margin-bottom: 16rpx;
}

.notice-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36rpx;
    height: 36rpx;
    background: #A259FF;
    color: #fff;
    border-radius: 50%;
    font-size: 24rpx;
    font-weight: bold;
}

.notice-content {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.notice-content text {
    font-size: 24rpx;
    color: #B8B8D1;
    line-height: 1.5;
}

/* 按钮样式 */
.button-container {
    margin-top: 40rpx;
}

.submit-btn {
    background: linear-gradient(45deg, #7B2FF2, #10AEFF);
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 12rpx;
    text-align: center;
    border: none;
    box-shadow: 0 4rpx 16rpx #7B2FF244;
}

.submit-btn:active {
    opacity: 0.8;
}

.submit-btn[disabled] {
    background: #2D1457;
    opacity: 0.7;
}

/* 绘制按钮样式 */
.draw-btn-container {
    margin-bottom: 20rpx;
}

.draw-btn {
    background: linear-gradient(45deg, #6069f0, #A259FF);
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 12rpx;
    text-align: center;
    border: none;
    box-shadow: 0 4rpx 16rpx #7B2FF244;
    display: flex;
    align-items: center;
    justify-content: center;
}

.draw-btn:active {
    opacity: 0.8;
}

.draw-icon {
    margin-right: 10rpx;
    font-size: 36rpx;
}
</style>